<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>图片上传</title>
    <style type="text/css">
    html,body{margin:0;padding:0;width:{$Width}px;height:{$Height}px;}
	.uploadpic{position:relative;}
	#ImgPr{border:0;}
	.puloadpic{position:absolute;width:{$Width}px;height:{$Height}px;}
	.inputfile{position:absolute;top:0px;left:0px;z-index:100;-moz-opacity:0.3;opacity:0.3;filter: alpha(opacity=30);background:#4f99c6;cursor:pointer;}
	#uploadicon{font-size:200px;overflow:hidden;display:block;width:{$Width}px;height:{$Height}px;-moz-opacity:0.0;opacity:0.0;filter: alpha(opacity=0);cursor:pointer;}
	.uploadtext{position:absolute;top:0px;left:0px;z-index:50;color:red;font-weight:bold;text-align:center;width:{$Width}px;height:{$Height}px;line-height:{$Height}px;cursor:pointer;overflow:hidden;}
	</style>
    <!--[if !IE]> -->
		<script type="text/javascript">
			window.jQuery || document.write("<script src='__PUBLIC__/qwadmin/js/jquery.js'>"+"<"+"/script>");
		</script>
		<!-- <![endif]-->
		<!--[if IE]>
		<script type="text/javascript">
		 window.jQuery || document.write("<script src='__PUBLIC__/qwadmin/js/jquery1x.js'>"+"<"+"/script>");
		</script>
		<![endif]-->
		<script type="text/javascript">
			if('ontouchstart' in document.documentElement) document.write("<script src='__PUBLIC__/qwadmin/js/jquery.mobile.custom.js'>"+"<"+"/script>");
		</script>
</head>

<body>
    <form enctype="multipart/form-data" id="PostMe" action="?" method="post" name="upform">
        <input type="hidden" value="{$Width}" name="Width">
        <input type="hidden" value="{$Height}" name="Height">
        <input type="hidden" value="{$BackCall}" name="BackCall">
        <div class="uploadpic">
		<!--<img id="ImgPr" src="<if condition="$Img eq ''">__PUBLIC__/qwadmin/images/nopic.gif<else />__ROOT__{$Img}</if>"  width="{$Width}" height="{$Height}">-->
		<img id="ImgPr" src="<if condition="$Img eq ''">__PUBLIC__/qwadmin/images/nopic.gif<else />{$smallImgnocomma}</if>"  width="{$Width}" height="{$Height}">
        <div class="uploadtext">上传</div>
			<div class="inputfile" title="点击上传图片">
				<input type="file" accept="image/*"  name="img" id="uploadicon" value="upload"/>
				<!--<input type="file" id="files" >-->
			</div>
		</div>
		
    </form>
    <script type="text/javascript">
        $('#uploadicon').on("change",function(){
          $('#PostMe').submit();
		   //alert('d');
        })
        
      $('#{$BackCall}',parent.document).val("{$Img}"); 
    //   $("#ImgPr").attr("src","/Public/attached/201904/20190402_183153.jpg");              
       
    </script>


<script src="/Public/lily/js/small-exif.js"></script>
<script>
var ipt = document.getElementById('uploadicon'),
    img = document.getElementById('ImgPr'),
    Orientation = null;
ipt.onchange = function () {
    var file = ipt.files[0],
        reader = new FileReader(),
        image = new Image();
        
    if(file){
        EXIF.getData(file, function() {  
            Orientation = EXIF.getTag(this, 'Orientation');
        });
        reader.onload = function (ev) {
            image.src = ev.target.result;
            image.onload = function () {
                var imgWidth = this.width,
                    imgHeight = this.height;
                // 控制上传图片的宽高
                if(imgWidth > imgHeight && imgWidth > 750){
                    imgWidth = 750;
                    imgHeight = Math.ceil(750 * this.height / this.width);
                }else if(imgWidth < imgHeight && imgHeight > 1334){
                    imgWidth = Math.ceil(1334 * this.width / this.height);
                    imgHeight = 1334;
                }
                
                var canvas = document.createElement("canvas"),
                ctx = canvas.getContext('2d');
                canvas.width = imgWidth;
                canvas.height = imgHeight;
                if(Orientation && Orientation != 1){
                    switch(Orientation){
                        case 6:     // 旋转90度
                            canvas.width = imgHeight;    
                            canvas.height = imgWidth;    
                            ctx.rotate(Math.PI / 2);
                            // (0,-imgHeight) 从旋转原理图那里获得的起始点
                            ctx.drawImage(this, 0, -imgHeight, imgWidth, imgHeight);
                            break;
                        case 3:     // 旋转180度
                            ctx.rotate(Math.PI);    
                            ctx.drawImage(this, -imgWidth, -imgHeight, imgWidth, imgHeight);
                            break;
                        case 8:     // 旋转-90度
                            canvas.width = imgHeight;    
                            canvas.height = imgWidth;    
                            ctx.rotate(3 * Math.PI / 2);    
                            ctx.drawImage(this, -imgWidth, 0, imgWidth, imgHeight);
                            break;
                    }
                }else{
                    ctx.drawImage(this, 0, 0, imgWidth, imgHeight);
                }
                img.src = canvas.toDataURL("image/jpeg", 0.8);
            }
        }
        reader.readAsDataURL(file);
    }
}
</script>

    
    
    
</body>

</html>